import React from 'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';

import { Outlet, useNavigate } from 'react-router-dom'
import {
  DesktopOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';


const { Header, Content, Footer } = Layout;

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: string,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items = [
  getItem('首页', '/index', <PieChartOutlined />),
  getItem('小说', '/message', <DesktopOutlined />),
  getItem('电影', '/order', <UserOutlined />),
  getItem('电视剧', '/user', <TeamOutlined />)
];



function App() {
const navigate=useNavigate()

// 点击事件，点击跳转页面
  const tz=(info)=>{
    if(info.key){
      navigate(info.key)
    }
  }

   const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <div>
       <Layout>
      <Header style={{ display: 'flex', alignItems: 'center' }}>
        <div className="demo-logo" />
        <Menu
          onClick={tz}
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Content style={{ padding: '0 48px' }}>
        <Breadcrumb
          style={{ margin: '16px 0' }}
          items={[{ title: '热搜榜' }, { title: '全部类型' }]}
        />
        <div
          style={{
            background: colorBgContainer,
            minHeight: 500,
            padding: 24,
            borderRadius: borderRadiusLG,
          }}
        >
          <Outlet/>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©{new Date().getFullYear()} Created by Ant UED
      </Footer>
    </Layout>
      
    </div>
  )
}

export default App
